<template>
  <div class="Information">
    <div class="Information-table">
      <el-table :data="tableData">
        <el-table-column type="index" :index="indexMethod" label="序" width="50">
        </el-table-column>
        <el-table-column prop="assessUser" label="留言人" width="120">
        </el-table-column>
        <el-table-column prop="articleName" label="相关文章" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="assessContent" label="评论简述" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="日期" width="120">
          <template slot-scope="scope">{{ scope.row.createTimeStr }}</template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle size="small"
              @click="showDetail(scope.row.assessId)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row :gutter="20" style="float: right;">
      <el-col :span="24" class="goodsindex-page-box">
        <el-pagination :page-size="pageSize" :current-page="pageNum" @current-change="handleCurrentChange"
          class="article_pagination" background layout="prev, pager, next" :total="totalSize"></el-pagination>
      </el-col>
    </el-row>

    <el-dialog title="评论详情" :visible.sync="assessShow">
      <el-form :model="assess">
        <el-form-item label="留言人" :label-width="CouponListWidth" prop="assessUser">
          <el-input v-model="assess.assessUser" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="留言内容" :label-width="CouponListWidth" prop="assessContent">
          <el-input v-model="assess.assessContent" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="关联文章" :label-width="CouponListWidth" prop="articleName">
          <el-input v-model="assess.articleName"></el-input>
        </el-form-item>
        <el-form-item label="留言时间" :label-width="CouponListWidth" prop="createTime">
          <el-date-picker v-model="assess.createTime" type="date"></el-date-picker>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getToDayAssessList, getAllAssessList, getAssessDetail } from '@/assets/api/assess.js';
export default {
  props: {
    type: 0
  },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      totalSize: 0,
      assess: {},
      assessShow: false,
      CouponListWidth: '120px'
    }
  },
  mounted() {
    if (this.type == 1) {
      this.todayAssess();
    } else {
      this.allAssessList();
    }
  },
  methods: {
    async todayAssess() {
      var value = { "pageNum": this.pageNum, "pageSize": this.pageSize, };
      getToDayAssessList(value).then((resp) => {
        this.tableData = resp.data.content;
        this.totalSize = resp.data.totalSize;
      })
    },

    async allAssessList() {
      var value = { "pageNum": this.pageNum, "pageSize": this.pageSize, };
      getAllAssessList(value).then((resp) => {
        this.tableData = resp.data.content;
        this.totalSize = resp.data.totalSize;
      })
    },

    handleCurrentChange(val) {
      var value = { "pageNum": val, "pageSize": this.pageSize };
      if (this.type == 1) {
        getToDayAssessList(value).then((resp) => {
          this.tableData = resp.data.content;
          this.totalSize = resp.data.totalSize;
        })
      } else {
        getAllAssessList(value).then((resp) => {
          this.tableData = resp.data.content;
          this.totalSize = resp.data.totalSize;
        })
      }
    },

    async showDetail(assessId) {

      getAssessDetail(assessId).then((resp) => {
        this.assess = resp.data
      })
      this.assessShow = true;
    },
    indexMethod(index) {
      return index + 1;
    }
  }
}
</script>

<style scoped>
.Information-title {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
</style>